// mtabs : tabs of the mobile version of the chat


body.mobile {
	font-size: 12px;
	#users .user {
		@include flex(1 0 24px);
		max-height: 36px;
	}
	.message .user {
		width: 75px;
	}
	#me {
		color: $mtab-color;	
	}
}

.mtabs {
	background: none;
}
.mtab {
	background: $mtab-bg;
	color: $mtab-color;
	text-align: center;
	height: $mtab-height;
	line-height: $mtab-height;
	position: fixed;
	z-index: 3;
	top: 0;
	&:first-child {
		width: 39%;
		left: 0;
		border-radius: 0 0 10px 0;
		&.closed::before {
			z-index: 2;
			position: absolute;
			top: -2px; left: 5px;
			content: '▼';
			opacity: 0.12;
			font-size: 35px;
		}
		&.open::before {
			z-index: 2;
			position: absolute;
			top: -2px; left: 5px;
			content: '▲';
			opacity: 0.12;
			font-size: 35px;
		}
	}
	&:last-child {
		width: 53%;
		right: 0;
		border-radius: 0 0 0 10px;
		&.closed::before {
			z-index: 2;
			position: absolute;
			top: -2px; right: 5px;
			content: '▼';
			opacity: 0.12;
			font-size: 35px;
		}
		&.open::before {
			z-index: 2;
			position: absolute;
			top: -2px; right: 5px;
			content: '▲';
			opacity: 0.12;
			font-size: 35px;
		}
	}
}
.mpage {
	display: none;
	width: 48%;
	position: fixed;
	z-index: 2;
	top: 0;	
	bottom: $minput-height + 20px;
	overflow-y: auto;
	padding-top: $mtab-height + 4px;
	background: $mpage-bg;
	color: $mpage-color;
	h2 {
		color: $mpage-color;
	}
	box-shadow: $mpage-shadow;
	&:first-child {
		width: 39%;
		left: 0;
		border-radius: 0 0 10px 0;
	}
	&:last-child {
		width: 53%;
		right: 0;
		border-radius: 0 0 0 10px;
	}
}

body.mobile {
	.tabs {
		.tab {
			color: $mobile-tab-color;
			&.selected {
				background-color: $mobile-tab-page-bg;
				color: $mobile-tab-selected-color;
			}
		}
	}
	.page {
		background-color: $mobile-tab-page-bg;
		color: $mobile-tab-page-color;
	}
}
